<template>
  <div class="map-layer-box">
    <img src="@/assets/card/close-map.png" class="close-img" @click="handleClose"/>
    <div class="base-map">
      <span class="base-map-title">选择底图</span>
      <div class="base-map-list">
        <div class="list-item" v-for="item in baseMapList"
             :key="item.id"
             :class="{'base-map-active': item.id === baseMapValue}"
             @click="changBaseMap(item)"
        >
          <div class="map-img">
            <img :src="item.img"/>
          </div>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="other-map">
      <span class="other-map-title">叠加图层</span>
      <div class="other-map-body">
        <div class="other-map-item" v-for="(item,index) in otherMapList"
             :key="index"
             :class="{'other-map-item-map': otherMapValue === index}"
             @click="changeOherMap(item.data, index)"
        >
          <img src="@/assets/card/2.5D.png"/>
          <span class="text">{{ item.key }}</span>
        </div>
        <div class="other-map-item other-map-item-last" :class="{'other-map-item-map': panoramaMap}"
             @click="changePanoramaMap">
          <img src="@/assets/card/jiejing.png"/>
          <span class="text">全景</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {TDT_URL} from "@/config/map";
import {getOtherPhotoUrl} from "@/api/map"

const baseMapList = ref(TDT_URL)
const panoramaMap = ref(false)
const otherMapList = ref([])
const baseMapValue = ref(1)
const otherMapValue = ref("")
const mouseXY = ref({
  x: -100,
  y: -100
})
const props = defineProps({
  id: {
    type: String,
    default: ""
  }
})
const emits = defineEmits(["change", "close"])
onMounted(async () => {
  getImageUrl()
  await nextTick()


})

async function getImageUrl() {
  otherMapList.value = await getOtherPhotoUrl() || []

}

//切换基础底图
const changBaseMap = (item) => {
  baseMapValue.value = item.id
  emits('change', 'base', item)
}
//切换其他图层
const changeOherMap = (value, index) => {
  const data = {
    list: value,
    visible: true,
    type: index === 0 ? 'imgeLayer25' : 'imgeLayer',
  }
  if (otherMapValue.value === index) {
    otherMapValue.value = '';
    data.visible = false;
  } else {
    otherMapValue.value = index;
  }

  emits('change', 'image', data)
}
const handleClose = () => {
  emits('close', false)
}
/*全景*/
const changePanoramaMap = () => {
  if (props.id) {
    panoramaMap.value = !panoramaMap.value
    if (panoramaMap.value) {
      addRightClickEvent()
      addMouseMoveEvent()
    } else {
      removeEvent("contextmenu", rightClick)
      removeEvent("mousemove", mouseMove)
      mouseXY.value = {
        x: -100,
        y: -100,
      }
    }
    emits("change", 'panorama', panoramaMap.value)
  } else {
    ElMessage.warning("请选择古道！")
  }
}

//鼠标右键事件
function addRightClickEvent() {
  document.addEventListener('contextmenu', rightClick)
}

function rightClick(e) {
  e.preventDefault()
  closeBottom()
}

function closeBottom() {
  panoramaMap.value = false;
  emits('change', 'panorama', panoramaMap.value)
  removeEvent('contextmenu', rightClick);
}

//移除事件
function removeEvent(type, fn) {
  document.removeEventListener(type, fn);
}

//鼠标移动
function mouseMove(e) {
  mouseXY.value = {
    x: e.clientX + 20,
    y: e.clientY - 10
  }
}

//添加滚动事件
function addMouseMoveEvent() {
  document.addEventListener("mousemove", mouseMove)
}
defineExpose({
  closeBottom
})
</script>
<style lang='scss' scoped>
.map-layer-box {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: #fff;
  padding: 8px 8px;
  padding-top: 16px;
  font-size: 14px;
  z-index: 100;

  .close-img {
    position: absolute;
    right: 8px;
    cursor: pointer;
  }
}

.base-map {
  background: #fff;
  padding: 8px 0;
  display: flex;
  align-items: center;

  .base-map-title {
    line-height: 1.1;
    // height: 30px;
    display: block;
    width: 40px;
    color: #666666;
  }

  .base-map-list {
    display: flex;
    padding-top: 16px;

    .list-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 16px;
      width: 102px;
      cursor: pointer;

      .map-img {
        height: 60px;
        width: 100px;
        border: 2px solid #ccc;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .base-map-active {
      color: #4185d0;

      .map-img {
        border: 2px solid #4185d0;
      }
    }

    .list-item:nth-child(1) {
      margin-left: 0px;
    }
  }
}

.other-map {
  display: flex;
  align-items: center;
  border-top: 1px solid #ccc;
  padding-top: 8px;
  padding-bottom: 8px;

  .other-map-title {
    line-height: 1.1;
    // height: 30px;
    display: block;
    width: 40px;
    color: #666666;
  }
}

.other-map-body {
  display: flex;

  .other-map-item {
    height: 60px;
    width: 100px;
    border: 2px solid #ccc;
    margin-right: 16px;
    text-align: center;
    position: relative;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }

    .text {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      font-size: 12px;
      color: #fff;
    }
  }

  .other-map-item-last {
    margin-right: 0px;
  }

  .other-map-item-map {
    border: 2px solid #4185d0;
  }
}

.vesicle-box {
  position: fixed;
  top: 100px;
  left: 100px;
  background: #088cb7;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  z-index: 9999;
  padding: 3px 6px;
  font-size: 12px;
  color: #fff;
}

.vesicle-box:before {
  position: absolute;
  content: "";
  height: 0;
  right: 100%;
  top: 6px;
  border-top: 5px solid transparent;
  border-right: 8px solid #4185d0;
  border-bottom: 5px solid transparent;
  z-index: 99999;
}
</style>
